<template>
	<div class="center-top">
		<div class="module-title">
			<span class="text">运动数据与睡眠监测</span>
			<SelectView @change="change" />
		</div>

		<ul class="summary-above">
			<li>
				运动总人数
				<div class="value">
					{{ listData.sumpedo }}
					<span class="unit">人</span>
				</div>
			</li>
			<li>
				步数总数
				<div class="value">
					{{ listData.sumstep }}
					<span class="unit">步</span>
				</div>
			</li>
			<li>
				平均步数
				<div class="value">
					{{ listData.avgstep }}
					<span class="unit">步</span>
				</div>
			</li>
			<li>
				卡路里平均数
				<div class="value">
					{{ listData.avgCol }}
					<span class="unit">千卡</span>
				</div>
			</li>
			<li style="grid-column: 1 / 3;">
				平均睡眠情况
				<div class="element-long">
					<div class="value">
						<span class="unit">深睡</span>
						{{ listData.avgDeepSleep }}
						<span class="unit">小时 </span>
					</div>
					<div class="value">
						<span class="unit">浅睡</span>
						{{ listData.avgLightSleep }}
						<span class="unit">
							小时
						</span>
					</div>
				</div>
			</li>
		</ul>

		<div class="person-data-show">
			<ul class="person-info">
				<li>
					姓名：<span class="value">{{ userInfo.userName }}</span>
				</li>
				<li>
					年龄：<span class="value">{{ userInfo.age }}</span>
				</li>
				<li>
					性别：<span class="value">{{ userInfo.sex }}</span>
				</li>
			</ul>

			<ul class="person-healthy-data">
				<li>
					<div class="name">平均心率值（次/分钟）</div>
					<div class="value">{{ userInfo.avgHearMinute }}</div>
				</li>
				<li class="healthy-ele">
					<div class="name">累计步数（步）</div>
					<div class="value">{{ userInfo.sumstep }}</div>
				</li>

				<li class="healthy-ele">
					<div class="name">累计卡路里（千卡）</div>
					<div class="value">{{ userInfo.sumrealCalorie }}</div>
				</li>
				<li class="healthy-ele">
					<div class="name">睡眠情况</div>
					<div class="value">
						深睡{{ userInfo.deepSleep }}小时，浅睡{{ userInfo.lightSleep }}小时
					</div>
				</li>
			</ul>
			<div id="center-line"></div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { lineOption } from './options';

import SelectView from './SelectView.vue';
import { getCenterTopData, getUserSevenDay } from '@/api';

export default {
	name: 'center-top',
	components: {
		SelectView,
	},
	data() {
		return {
			chart: null,
			listData: {},
			userInfo: {},
			index: 0,
			data: [],
			timer: null,
			current: 1,
		};
	},

	mounted() {
		this.chart = echarts.init(document.getElementById('center-line'));
		this.getLineData();
		this.eventBus.$on('resize', () => {
			if (this.chart) this.chart.resize();
		});
	},

	methods: {
		loop() {
			this.index = 0;
			this.showUserLine();
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				this.index++;
				if (this.index >= this.data.length) {
					this.index = 0;
				}
				this.showUserLine();
			}, 5000);
		},

		showUserLine() {
			const data = this.data[this.index];
			const {
				userName,
				age,
				sex,
				avgHearMinute,
				sumstep,
				sumrealCalorie,
				deepSleep,
				lightSleep,
				avgSteplist = {},
				avgHeartlist = {},
			} = data;

			this.userInfo = {
				userName,
				age,
				sex: sex == 1 ? '男' : '女',
				avgHearMinute,
				sumstep,
				sumrealCalorie,
				deepSleep,
				lightSleep,
			};
			// const x = Object.keys(avgSteplist).reverse();
			const x = [
        "08:00", "08:30",
        "09:00", "09:30",
        "10:00", "10:30",
        "11:00", "11:30",
        "12:00", "12:30",
        "13:00", "13:30",
        "14:00", "14:30",
        "15:00", "15:30",
        "16:00", "16:30",
        "17:00", "17:30",
        "18:00", "18:30",
        "19:00", "19:30",
        "20:00", "20:30",
        "21:00", "21:30",
        "22:00", "22:30"] ;
			const y = Object.values(avgSteplist).reverse();
			const rate = Object.values(avgHeartlist).reverse();
			if (this.chart) {
				this.chart.clear();
				this.chart.setOption(lineOption(x, y, rate));
			}
		},
		//  根据筛选条件 默认触发一次
		change(type) {
			this.getData(type);
		},

		async getData(type) {
			const result = await getCenterTopData(type);
			this.listData = result || {};
		},

		async getLineData() {
			const { current } = this;
			const result = await getUserSevenDay({
				current: current,
				size: 20,
			});
			this.data = [...this.data, ...(result || [])];
			if (current == 1) {
				this.loop();
			}
			if (result && result.length == 20) {
				setTimeout(() => {
					this.current++;
					this.getLineData();
				}, 5000);
			}
		},
	},
	beforeDestroy() {
		if (this.chart) this.chart.dispose();
		this.eventBus.$off('resize');
	},
};
</script>
<style lang="scss">
.center-top {
	padding: 1vh 2%;

	.summary-above {
		height: 25vh;
		padding: 0.6vh 0;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 17vw 17vw;
		grid-column-gap: 0.8vw;
		grid-row-gap: 0.4vw;

		li {
			font-size: 1.26vh;
			font-weight: bold;
			color: #fff;
			padding: 1.6vh 0 0 0;
			text-align: center;

			.element-long {
				display: grid !important;
				grid-template-columns: 50% 50%;
				width: 35.41666vw;
				text-align: center;
			}

			.value {
				font-size: 2.222222vh;
				color: #61fcff;
				font-weight: bold;
				margin-top: 1vh;

				.unit {
					font-size: 1.2962vh;
					font-weight: 400;
				}
			}
		}
	}

	.person-data-show {
		padding-top: 0.6232vw;
		height: 41.48148vh;

		.person-info {
			height: 4.444444vh;
			display: flex;
			justify-content: space-between;
			align-items: center;

			li {
				width: 33%;
				text-align: center;
				font-weight: bold;
				color: #fff;
				font-size: 1.29629vh;

				.value {
					font-weight: 400;
				}
			}
		}

		.person-healthy-data {
			margin-top: 1.527777vh;
			display: flex;

			li {
				width: 8.75vw;
				height: 5.6481vh;
				color: #fff;
				font-weight: bold;
				font-size: 1.29629vh;
				text-align: center;
				display: flex;
				flex-direction: column;
				border-right: 1px solid rgba(48, 147, 240, 0.2);

				.value {
					font-weight: 400;
					margin-top: 1.48148vh;
				}

				&:last-child {
					border: 0;
				}
			}
		}
	}

	#center-line {
		height: 28.77777vh;
	}
}
</style>
